<template>
	<!-- 笔试题库 -->
	<view class="writebrush-container">
		<navbar-btn :data="questionarr" @reply="replyFn"></navbar-btn>
		<view class="writebrush-list">
			<view class="writebrush-list-title">
				<text>【单选】</text>
				<text>{{singledata.title}}</text>
			</view>
			<view class="writebrush-list-option">
				<u-radio-group placement="column" v-model="checkedVal" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in singledata.options"
						:key="index" :label="item.name" :name="item.name">
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<!-- 底部按钮 -->
		<info-btn :data="singledata"></info-btn>
	</view>
</template>

<script>
	import InfoBtn from "@/components/infobtn.vue";
	import NavbarBtn from "@/components/navbarbtn.vue"
	export default {
		components: {
			InfoBtn,
			NavbarBtn
		},
		data() {
			return {
				// 题目
				questionarr: [{
					id: 0,
					type: 0, // 类型，0代表单选，1代表多选
					title: "以下哪个选项不是HTML5新增的语义化标签？",
					options: [{
						name: "A: footer",
						disabled: false
					}, {
						name: "B: nav",
						disabled: false
					}, {
						name: "C: video",
						disabled: false
					}, {
						name: "D: header",
						disabled: false
					}],
					answer: ["C: video"],
				}, {
					id: 1,
					type: 1, // 类型，0代表单选，1代表多选
					title: "以下哪个选项是行内元素？",
					options: [{
						name: "A: footer1",
						disabled: false
					}, {
						name: "B: nav1",
						disabled: false
					}, {
						name: "C: video1",
						disabled: false
					}, {
						name: "D: header1",
						disabled: false
					}],
					answer: ["A: span"],
				}, {
					id: 2,
					type: 0, // 类型，0代表单选，1代表多选
					title: "div和p标签的区别错误的是？",
					options: [{
						name: "A: footer2",
						disabled: false
					}, {
						name: "B: nav2",
						disabled: false
					}, {
						name: "C: video2",
						disabled: false
					}, {
						name: "D: header2",
						disabled: false
					}],
					answer: ["D: 两个都是块级元素"],
				}],
				singledata: {}, // 子组件传递过来的数据
				checkedVal: "A: footer"
			};
		},
		onShow() {
			this.checkedVal = ""
		},
		methods: {
			replyFn(data) {
				this.singledata = data;
			},
			groupChange(n) {
				this.checkedVal = ""
				this.checkedVal = n;
				console.log(this.checkedVal);
			},
		}
	}
</script>

<style lang="scss">
	.writebrush-container {
		.writebrush-navbar {
			padding: 18rpx 24rpx;
			@include flex;
			justify-content: space-between;
		}

		.writebrush-list {
			padding: 18rpx 24rpx;

			.writebrush-list-title {
				font-weight: bold;
			}

			.writebrush-list-option {
				margin-top: 20rpx;
			}
		}
	}

	::v-deep {
		.u-radio {
			align-items: flex-start !important;
		}

		.u-radio__text {
			line-height: 40rpx !important;
		}
	}
</style>
